import {GridList,View, Image, Spacings, Text,Carousel} from "react-native-ui-lib";

import * as React from "react";
import {StyleSheet} from "react-native";
// 定义 GridMenu 组件的 props 类型
interface GridMenuProps {
    images?: string[];
}
export function HomeCarousel({ images =[] }: GridMenuProps) {
    return (
        <Carousel
            containerStyle={{
                height: 200,
                borderRadius: 4,
                overflow: 'hidden'
            }}
            loop
            autoplay
            // pageControlProps={{
            //     size: 10,
            //     containerStyle: styles.picker
            // }}
            pageControlPosition={Carousel.pageControlPositions.OVER}
        >
            {images.map((image, i) => {
                return (
                    <View flex centerV key={i}>
                        <Image
                            overlayType={Image.overlayTypes.BOTTOM}
                            style={{flex: 1,}}
                            source={{
                                uri: image
                            }}
                        />
                    </View>
                );
            })}
        </Carousel>
    );
}

const styles = StyleSheet.create({
    picker: {
        marginHorizontal: 20
    },
    page: {
        flex: 1,
        borderWidth: 1,
        borderRadius: 8
    },
    loopCarousel: {
        position: 'absolute',
        bottom: 15,
        left: 10
    }
});
